 /*
 * @description: 客服系统会话设置/接入规则
 * @Author: along
 * @Date: 2020-09-25
 * @Last Modified by: along
 * @Last Modified time: 2020-09-25
 */
<template>
    <div class="rule customRule">
        <div class="wrap">
            <p class="wrap-head">
                接入语设置
                <span>指当客服自动或手动接入客户时，系统自动推送的消息；{Name}会被动态替换成工号的昵称/账号</span>
            </p>
            <p class="wrap-title">接入语</p>
            <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="formData.welcome_text"
                maxlength="300"
                :autosize="{ minRows: 4, maxRows: 6}"
                show-word-limit
                :style="{color: '#333333', marginBottom: '40px'}"
            />
            <p class="wrap-head">
                自动回复
                <span>用户首次访问店铺，发送的信息</span>
            </p>
            <p class="wrap-title">接入语</p>
            <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="formData.auto_reply_text"
                maxlength="300"
                :autosize="{ minRows: 4, maxRows: 6}"
                show-word-limit
                :style="{color: '#333333', marginBottom: '40px'}"
            />
            <p class="wrap-head">
                关键字回复
                <span>用户输入的关键字，系统自动回复的内容</span>
            </p>
            <p class="wrap-title">
                <el-checkbox
                    v-model="keyword_reply_enable"
                    :style="{marginRight: '5px'}"
                />
                启用关键字回复
            </p>
            <div
                v-for="(option, i) in formData.keyword_reply"
                :key="i"
                class="wrap-list"
            >
                <div class="list">
                    <p class="list-title">关键字{{ (i + 1) | filterNumber }}</p>
                    <el-input
                        type="text"
                        placeholder="请输入关键字"
                        v-model="option.keyword"
                        maxlength="10"
                        show-word-limit
                        size="medium"
                        :style="{width: '332px', marginBottom: '24px'}"
                    />
                    <p class="list-title">回复内容</p>
                    <el-input
                        type="textarea"
                        placeholder="请输入关键字回复内容"
                        v-model="option.reply"
                        maxlength="100"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        show-word-limit
                    />
                </div>
                <div
                    class="list-button"
                    @click="fnDelete(i)"
                >
                    <i class="iconfont el-icon-hand-shanchu1"/>
                    <p>删除</p>
                </div>
            </div>
            <div
                class="add"
                @click="fnAddKeyword()">
                <i class="iconfont el-icon-hand-iconjia"/>
                添加关键词回复
            </div>
        </div>
        <div class="foot">
            <el-button
                size="small"
                type="default"
                :style="{width: '120px', height: '36px', margin: '0 32px 0 96px'}"
                @click="fnRest()"
            >
                重置
            </el-button>
            <el-button
                size="small"
                type="primary"
                :style="{width: '120px', height: '36px'}"
                @click="fnSubmit()"
            >
                确定
            </el-button>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            keyword_reply_enable: true,
            formData: {
                welcome_text: '',
                auto_reply_text: '',
                keyword_reply: [{
                    keyword: '',
                    reply: ''
                }],
                server_timeout: '',
                server_timeout_text: '',
                customer_timeout: '',
                customer_timeout_text: ''
            }
        };
    },
    filters: {
        filterNumber (val) {
            if(val == 1) return '一';
            if(val == 2) return '二';
            if(val == 3) return '三';
            if(val == 4) return '四';
            if(val == 5) return '五';
        }
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{ title: "客服系统"},{title: '接入规则'}]);
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.$post('/student/customer_service_zsdx_config%5Cget',{},resp=>{
                if (resp.code == 1) {
                    this.formData = {
                        ...resp.data
                    };
                    this.keyword_reply_enable = resp.data.keyword_reply_enable ? true : false;
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 提交数据
         */
        fnSubmit () {
            if(this.keyword_reply_enable && this.formData.keyword_reply.length > 0) {
                for(let key=0; key<this.formData.keyword_reply.length; key++){
                    if(this.formData.keyword_reply[key].keyword == '') {
                        const notice = `第${key + 1}关键字不可以为空`;

                        this.$notify({
                            title: '提示',
                            message: notice,
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }

                    if(this.formData.keyword_reply[key].reply == '') {
                        const notice = `第${key + 1}关键字回复不可以为空`;

                        this.$notify({
                            title: '提示',
                            message: notice,
                            type: 'warning',
                            duration: 2000
                        });
                        return false;
                    }
                }
            }

            const data = {
                ...this.formData,
                welcome_text: this.formData.welcome_text == '' ? '' : this.formData.welcome_text,
                auto_reply_text: this.formData.auto_reply_text == '' ? '' : this.formData.auto_reply_text,
                keyword_reply_enable: this.keyword_reply_enable ? 1 : 0,
                keyword_reply: this.formData.keyword_reply.length > 0 ? JSON.stringify(this.formData.keyword_reply) : '',
            };

            this.$post('/student/customer_service_zsdx_config%5Cset',{
                ...data
            },resp=>{
                if (resp.code == 1) {
                    this.init();
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });

        },

        /**
         * @description 添加关键词回复
         */
        fnAddKeyword () {
            if(this.formData.keyword_reply.length === 5) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以添加5条',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.formData.keyword_reply.push({
                keyword: '',
                reply: ''
            });
        },

        /**
         * @description 删除关键词回复
         */
        fnDelete (i) {
            this.formData.keyword_reply.splice(i,1);
        },

        /**
         * @description 重置
         */
        fnRest () {
            this.$set(this.formData, 'welcome_text', '您好，客服{Name}为您服务');
            this.$set(this.formData, 'auto_reply_text', '您好，请问有什么可以帮您');

            this.fnSubmit();
        }
    }
};
</script>

<style lang="less" scoped>
.rule {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    .wrap {
        flex: 1;
        background: #FBFBFB;
        box-sizing: border-box;
        padding: 18px 32px 32px 32px;
        border: 1px solid #EEEEEE;
        .wrap-head {
            height: 38px;
            display: flex;
            align-items: center;
            color: #333333;
            font-weight: 500;
            box-sizing: border-box;
            border-bottom: 1px #E9E9E9 solid;
            &>span {
                padding-left: 10px;
                color: #999999;
                font-size: 14px;
            }
        }
        .wrap-title {
            color: #333333;
            font-size: 14px;
            margin: 24px 0 12px 0;
        }
        .wrap-list {
            width: 760px;
            display: flex;
            margin-left: 32px;
            margin-bottom: 24px;
            .list {
                width: 664px;
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                box-sizing: border-box;
                padding: 32px;
                .list-title {
                    color: #333333;
                    font-size: 14px;
                    margin-bottom: 12px;
                }
            }
            .list-button {
                width: 80px;
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                justify-content: center;
                align-items: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-left: 16px;
                cursor: pointer;
                .el-icon-hand-shanchu1 {
                    color: #666666;
                    font-size: 16px;
                    margin-bottom: 10px;
                }
                &>p {
                    color: #666666;
                    font-size: 14px;
                }
            }
        }
        .add {
            width: 760px;
            height: 36px;
            border-radius: 4px;
            border: 2px dashed #20A0FF;
            margin-top: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #20A0FF;
            font-size: 14px;
            font-weight: 500;
            margin-left: 32px;
            cursor: pointer;
            &>i {
               color: #20A0FF;
               font-size: 15px;
               font-weight: 500;
               margin-right: 10px;
            }
        }
    }
    .foot {
        height: 36px;
        margin-top: 32px;
        background: #ffffff;
        display: flex;
        align-items: center;
    }
}
</style>

<style lang="less">
.customRule {
    .el-textarea__inner {
        color: #333333;
        resize: none;
        min-height: 90px;
    }
}
</style>